<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能诊疗预约平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#FF7D00',
                        neutral: '#F2F3F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.02);
            }
        }
    </style>
</head>

<body class="font-inter bg-gray-50 text-dark">
<main>
<!-- 科室导航 -->
<section id="departments" class="py-16 bg-white">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">科室导航</h2>
            <p class="mt-4 text-gray-600 max-w-2xl mx-auto">
                我们提供全面的医疗科室服务，覆盖常见疾病与专科诊疗需求，由经验丰富的医生团队为您提供专业诊疗服务。
            </p>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
            <!-- 科室卡片 -->
            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100 hover-scale">
                <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                    <i class="fa fa-heartbeat text-primary text-2xl"></i>
                </div>
                <h3 class="font-semibold text-lg mb-2">心内科</h3>
                <p class="text-gray-500 text-sm">心脏疾病诊疗</p>
                <div class="mt-4 text-primary text-sm">
                    <span>12位专家</span>
                    <i class="fa fa-arrow-right ml-1"></i>
                </div>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100 hover-scale">
                <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                    <i class="fa fa-stethoscope text-primary text-2xl"></i>
                </div>
                <h3 class="font-semibold text-lg mb-2">呼吸科</h3>
                <p class="text-gray-500 text-sm">肺部疾病诊疗</p>
                <div class="mt-4 text-primary text-sm">
                    <span>9位专家</span>
                    <i class="fa fa-arrow-right ml-1"></i>
                </div>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100 hover-scale">
                <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                    <i class="fa fa-medkit text-primary text-2xl"></i>
                </div>
                <h3 class="font-semibold text-lg mb-2">消化科</h3>
                <p class="text-gray-500 text-sm">胃肠疾病诊疗</p>
                <div class="mt-4 text-primary text-sm">
                    <span>11位专家</span>
                    <i class="fa fa-arrow-right ml-1"></i>
                </div>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100 hover-scale">
                <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                    <i class="fa fa-eye text-primary text-2xl"></i>
                </div>
                <h3 class="font-semibold text-lg mb-2">眼科</h3>
                <p class="text-gray-500 text-sm">眼部疾病诊疗</p>
                <div class="mt-4 text-primary text-sm">
                    <span>8位专家</span>
                    <i class="fa fa-arrow-right ml-1"></i>
                </div>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100 hover-scale">
                <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                    <i class="fa fa-user-md text-primary text-2xl"></i>
                </div>
                <h3 class="font-semibold text-lg mb-2">骨科</h3>
                <p class="text-gray-500 text-sm">骨骼疾病诊疗</p>
                <div class="mt-4 text-primary text-sm">
                    <span>10位专家</span>
                    <i class="fa fa-arrow-right ml-1"></i>
                </div>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100 hover-scale">
                <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                    <i class="fa fa-child text-primary text-2xl"></i>
                </div>
                <h3 class="font-semibold text-lg mb-2">儿科</h3>
                <p class="text-gray-500 text-sm">儿童疾病诊疗</p>
                <div class="mt-4 text-primary text-sm">
                    <span>15位专家</span>
                    <i class="fa fa-arrow-right ml-1"></i>
                </div>
            </div>
        </div>

        <div class="mt-10 text-center">
            <button class="px-6 py-3 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-colors">
                查看全部科室 <i class="fa fa-angle-right ml-1"></i>
            </button>
        </div>
    </div>
</section>
</main>

</body>
</html>